<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>店铺管理</span>
      <el-button
        style="float: right"
        :type="canEdit ? 'success' : 'primary'"
        size="small"
        >{{ canEdit ? "保存" : "编辑" }}</el-button
      >
    </div>
    <!-- 表单 -->
    <div class="content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="店铺名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="店铺公告">
          <el-input type="textarea" v-model="form.bulletin" rows="8"></el-input>
        </el-form-item>

        <el-form-item label="店铺图像">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/shop/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="店铺图片"
          >
          <el-upload
            :http-request="handleAllAvatarSuccess"
            action="http://127.0.0.1:5000/shop/upload"
            list-type="picture-card"
            
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="配送费">
          <el-input-number
            type="text"
            v-model="form.deliveryPrice"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="配送时间">
          <el-input-number
            type="text"
            v-model="form.deliveryTime"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="配送描述">
          <el-input type="text" v-model="form.description"></el-input>
        </el-form-item>

        <el-form-item label="店铺评分">
          <el-rate
            v-model="form.score"
            disabled
            show-score
            text-color="#ff9900"
          >
          </el-rate>
        </el-form-item>

        <el-form-item label="销量">
          <el-input type="text" v-model="form.sellCount"></el-input>
        </el-form-item>

        <el-form-item label="活动">
          <el-checkbox-group v-model="form.supports">
            <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
            <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购" name="type"></el-checkbox>
            <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="营业时间">
          <el-time-picker
            is-range
            v-model="form.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { shopInfo, shopUpload } from "../../api/shop";
export default {
  data() {
    return {
      //按钮样式
      canEdit: false,
      //表单数据
      form: {
        name: "",
        bulletin: "",
        avatar: "",
        deliveryPrice: 0,
        deliveryTime: 0,
        description: "",
        score: 0,
        sellCount: "",
        supports: [],
        pics: [],
        date: [],
      },
      // //评分
      // value: 5,
      // //营业时间
      // value1: new Date(2016, 9, 10, 18, 40),
      // value2: new Date(2016, 9, 10, 18, 40),
      //照片墙数据
      // 弹出框 img
      dialogImageUrl: "",
      // 弹出框关闭
      dialogVisible: false,
      //默认
      disabled: false,
      //// 图片链接
      imageUrl: "",
      
    };
  },
  methods: {
    //
    onSubmit() {
      //立即创建
      console.log("submit!");
    },
    //获取数据
    async getDate() {
      let res = await shopInfo();
      console.log(res,'111');
      this.form = res.data.data;
    },
    //店铺图片上传成功
    handleAvatarSuccess(res) {
      if (res) {
        this.form.avatar = res.imgUrl;
      }
    },

    //照片墙的图片
    //照片删除
    handleRemove(file) {
      console.log(file);
    },
    //照片放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //照片下载
    handleDownload(file) {
      console.log(file);
    },
    //获取上传图片数据
    async handleAllAvatarSuccess(pmamas) {
      console.log(pmamas);
      // 创建一个FormData对象
      let FormData = new FormData();
      //把文件追加到fromData对象中
      FormData.append("file", pmamas.file);

      console.log(FormData, "hhh");
      
      const newRes = await shopUpload(FormData);
    },
  },
  //生命周期
  created() {
    this.getDate();
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 70%;
}
//店铺照片
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>